From eb18151c7a89541c34065c7a7e25ac9fffff0962 Mon Sep 17 00:00:00 2001 From: Krinkle Date: Thu, 23 Dec 2010 19:25:16 +0000 Subject: [PATCH] adding jQuery.makeCollapsible plugin --- resources/Resources.php | 6 +- resources/jquery/jquery.makeCollapsible.css | 12 +++ resources/jquery/jquery.makeCollapsible.js | 109 ++++++++++++++++++++ 3 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 resources/jquery/jquery.makeCollapsible.css create mode 100644 resources/jquery/jquery.makeCollapsible.js diff --git a/resources/Resources.php b/resources/Resources.php index 6c205ab342..d4f0a08236 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -78,6 +78,10 @@ return array( 'jquery.localize' => array( 'scripts' => 'resources/jquery/jquery.localize.js' ), + 'jquery.makeCollapsible' => array( + 'scripts' => 'resources/jquery/jquery.makeCollapsible.js', + 'styles' => 'resources/jquery/jquery.makeCollapsible.css', + ), 'jquery.suggestions' => array( 'scripts' => 'resources/jquery/jquery.suggestions.js', 'styles' => 'resources/jquery/jquery.suggestions.css', @@ -345,7 +349,7 @@ return array( ), 'mediawiki.util' => array( 'scripts' => 'resources/mediawiki.util/mediawiki.util.js', - 'dependencies' => array( 'jquery.checkboxShiftClick', 'jquery.client', 'jquery.placeholder' ), + 'dependencies' => array( 'jquery.checkboxShiftClick', 'jquery.client', 'jquery.placeholder', 'jquery.makeCollapsible' ), 'debugScripts' => 'resources/mediawiki.util/mediawiki.util.test.js', ), 'mediawiki.action.history' => array( diff --git a/resources/jquery/jquery.makeCollapsible.css b/resources/jquery/jquery.makeCollapsible.css new file mode 100644 index 0000000000..fe46a0af57 --- /dev/null +++ b/resources/jquery/jquery.makeCollapsible.css @@ -0,0 +1,12 @@ +/* See also jQuery.makeCollapsible.js */ +.kr-collapsible-toggle { + float:right; +} +/* list-items go as wide as their parent element, don't float them inside list items */ +li .kr-collapsible-toggle { + float:none; +} +/* the added list item should have no list-style */ +.kr-collapsibile-toggle-li { + list-style:none; +} \ No newline at end of file diff --git a/resources/jquery/jquery.makeCollapsible.js b/resources/jquery/jquery.makeCollapsible.js new file mode 100644 index 0000000000..363f307640 --- /dev/null +++ b/resources/jquery/jquery.makeCollapsible.js @@ -0,0 +1,109 @@ +/** + * make lists, divs, tables etc. toggleable + * + * This will enable collapsible-functionality on all passed elements. + * Will prevent binding twice to the same element. + * Initial state is expanded by default, this can be overriden by adding class + * "kr-collapsed" to the "kr-collapsible" element. + * Elements made collapsible have class "kr-made-collapsible". + * Except for tables and lists, the inner content is wrapped in "kr-collapsible-content". + * + * Copyright 2008-2009 Krinkle + * + * @license CC-BY 2.0 NL + */ + +$.fn.makeCollapsible = function() { + + return this.each(function() { + var $that = $(this).addClass('kr-collapsible'), // in case $('#myAJAXelement').makeCollapsible() was called + that = this, + collapsetext = $(this).attr('data-collapsetext'), + expandtext = $(this).attr('data-expandtext'); + // Use custom text or default ? + if( !collapsetext || collapsetext == ''){ + collapsetext = 'Collapse'; + } + if ( !expandtext || expandtext == ''){ + expandtext = 'Expand'; + } + // Create toggle link with a space around the brackets ( ) + $toggleLink = $(' [' + collapsetext + '] ').click(function(){ + var $that = $(this), + $collapsible = $that.closest('.kr-collapsible.kr-made-collapsible').toggleClass('kr-collapsed'); + if ($that.hasClass('kr-collapsible-toggle-hide')) { + // Change link to "Show" + $that + .removeClass('kr-collapsible-toggle-hide').addClass('kr-collapsible-toggle-show') + .find('> a').html(expandtext); + // Hide the collapsible element + if ($collapsible.is('table')) { + // Hide all direct childing table rows of this table, except the row containing the link + // Slide doens't work, but fade works fine as of jQuery 1.1.3 + // http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-table-row#920480 + // Stop to prevent animaties from stacking up + $collapsible.find('> tbody > tr').not($that.parent().parent()).stop(true, true).fadeOut(); + } else if ($collapsible.is('ul') || $collapsible.is('ol')) { + $collapsible.find('> li').not($that.parent()).stop(true, true).slideUp(); + } else { //
,

etc. + $collapsible.find('> .kr-collapsible-content').slideUp(); + } + } else { + // Change link to "Hide" + $that + .removeClass('kr-collapsible-toggle-show').addClass('kr-collapsible-toggle-hide') + .find('> a').html(collapsetext); + // Show the collapsible element + if ($collapsible.is('table')) { + $collapsible.find('> tbody > tr').not($that.parent().parent()).stop(true, true).fadeIn(); + } else if ($collapsible.is('ul') || $collapsible.is('ol')) { + $collapsible.find('> li').not($that.parent()).stop(true, true).slideDown(); + } else { //

,

etc. + $collapsible.find('> .kr-collapsible-content').slideDown(); + } + } + return false; + }); + // Skip if it has been enabled already. + if ($that.hasClass('kr-made-collapsible')) { + return; + } else { + $that.addClass('kr-made-collapsible'); + } + // Elements are treated differently + if ($that.is('table')) { + // The toggle-link will be in the last cell (td or th) of the first row + var $lastCell = $('tr:first th, tr:first td', that).eq(-1); + if (!$lastCell.find('> .kr-collapsible-toggle').size()) { + $lastCell.prepend($toggleLink); + } + + } else if ($that.is('ul') || $that.is('ol')) { + if (!$('li:first', $that).find('> .kr-collapsible-toggle').size()) { + // Make sure the numeral count doesn't get messed up, reset to 1 unless value-attribute is already used + if ( $('li:first', $that).attr('value') == '' ) { + $('li:first', $that).attr('value', '1'); + } + $that.prepend($toggleLink.wrap('

  • ').parent()); + } + } else { //
    ,

    etc. + // Is there an content-wrapper already made ? + // If a direct child with the class does not exists, create the wrap. + if (!$that.find('g> .kr-collapsible-content').size()) { + $that.wrapInner('

    '); + } + + // Add toggle-link if not present + if (!$that.find('> .kr-collapsible-toggle').size()) { + $that.prepend($toggleLink); + } + } + // Initial state + if ($that.hasClass('kr-collapsed')) { + $toggleLink.click(); + } + }); +}; +$(function(){ + $('.kr-collapsible').makeCollapsible(); +}); \ No newline at end of file -- 2.20.1